<template>
  <div class="container">
    <!-- 头部搜索区域 -->
    <el-row>
      关键字<el-input v-model="queryInfo.keyword"></el-input>
      <div class="filter-item fr">
        <el-button @click="cleardate(queryInfo.keyword)">清除</el-button>
        <el-button type="primary" @click="cleardata(queryInfo.keyword)">搜索</el-button>
      </div>
    </el-row>
    <!-- 头部搜索区域结束 -->

    <!-- 数据总条数 -->
    <el-alert :title="alertText" type="info" show-icon></el-alert>
    <!-- 数据总条数结束 -->

    <!-- 数据表格 -->
    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="编号" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="题型">
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-else-if="scope.row.questionType === '2'">多选</span> -->
          <span>{{
                  getthetextvalue(questionType, scope.row.questionType).label
                }}</span>
        </template>
      </el-table-column>
      <el-table-column label="题目编号" width="200px">
        <template slot-scope="scope">
          <el-link
            v-for="(item, index) in scope.row.questionIDs"
            :key="index"
            :underline="false"
            type="primary"
            @click="handleChange(item.id)"
            >{{ item.number }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答题时间(s)">
        <template slot-scope="scope">
          <span>{{ scope.row.totalSeconds }}</span>
        </template>
      </el-table-column>
      <el-table-column label="正确率(%)">
        <template slot-scope="scope">
          <span>{{ scope.row.accuracyRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="录入人">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>

      <!-- 删除按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            plain
            size="small"
            @click="removeUser(scope.row.id)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格结束 -->

    <!-- 底部分页区域 -->
    <div class="block fr">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="Number(queryInfo.pagesize)"
        layout="prev, pager, next, sizes,jumper"
        :total="Number(counts)"
      >
      </el-pagination>
    </div>
    <!-- 底部分页区域结束 -->

    <!-- 题目预览弹出框 -->
    <topic-preview ref="editUser" :Subjectdata="Subjectdata" :checkboxCurrent="checkboxCurrent"></topic-preview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import TopicPreview from '../components/topic-preview'
import { questionType } from '@/api/hmmm/constants'
export default {
  components: {
    TopicPreview
  },
  data () {
    return {
      dataList: [],
      Subjectdata: [],
      PreviewList: [],
      serial: '',
      alertText: '',
      counts: null,
      dialogVisible: false,
      questionType,
      // 多选框选中项
      checkboxCurrent: undefined,
      // 获取数据列表参数
      queryInfo: {
        page: '1',
        pagesize: 20,
        keyword: ''
      }
    }
  },
  computed: {
    // 获取题目的类型和难度
    getthetextvalue () {
      return function (arr, val) {
        return arr.find((t) => {
          return t.value === +val
        })
      }
    }
  },
  created () {
    // 读取数据
    this.gitrandoms()
  },
  methods: {
    // 获取列表数据
    async gitrandoms (params) {
      const { data: res } = await randoms(this.queryInfo)
      this.dataList = res.items
      this.counts = res.counts
      this.alertText = `共 ${this.counts} 条记录`
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      if (this.queryInfo.page === 1) {
        this.gitrandoms()(this.queryInfo)
      }
    },
    // 跳转到每一页
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.gitrandoms()
    },
    // 删除按钮事件 根据id
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id: user })
            .then((response) => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.gitrandoms(this.queryInfo)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 搜索按钮
    cleardata () {
      this.gitrandoms()
    },
    // 清除按钮
    cleardate () {
      this.queryInfo.keyword = ''
      this.gitrandoms()
    },
    // 题目预览
    async handleChange (id) {
      this.$refs.editUser.dialogFormV()
      const { data: res } = await detail({ id })
      this.Subjectdata = res
      // 获取多选框的选中项
      this.checkboxCurrent = res.options.filter(t => t.isRight)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  margin: 10px;
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  font-size: 12px;

  // 头部搜索区域
  .el-input {
    width: 16%;
    margin-left: 10px;
  }

  // 数据总条数
  .el-alert {
    margin: 20px 0;
  }

  // 数据表格
  .el-table {
    margin-bottom: 15px;
  }

  // 题目预览弹框
  .aborder {
    padding: 16px 0;
    border-bottom: 1px solid rgb(177, 177, 177);
  }
}
</style>
